class Cart {
    constructor() {
        this.cartTable = document.querySelector('.cartTable')
        this.selectAll = document.querySelector('.selectAll')
        this.dlAll = document.querySelector('.dlAll')
        this.tbody = document.querySelector('tbody')
        this.calc = document.querySelector('.calc')
        this.totanum = document.querySelector('.totanum')
        this.money = document.querySelector('.money')
        this.dataList = JSON.parse(localStorage.getItem('cart')) || []
        this.init()
    }
    init() {
        this.render()
        this.add()
        this.count()
    }
    render() {
        this.tbody.innerHTML = ''
        if (this.dataList.length > 0) {
            this.dataList.forEach(item => {
                this.tbody.innerHTML += `
                <tr>
                <td><input type="checkbox" class="select" data-id="${item.id}"${item.is_select?'checked':''}></td>
                <td>
                <img src="${item.images[0].smallPic}">
                <span class="hide">${item.brief}</span>
                </td>
                <td class="price">${item.salePrice}</td>
                <td>
                <span class="sub" data-id="${item.id}">-</span>
                <input type="txet" value="${item.cart_Num}"  class="txt" data-id="${item.id}">
                <span class="add" data-id="${item.id}">+</span>
                <td><span class="price">${item.salePrice * item.cart_Num}元</span></td>
                <td><span class="del" data-id="${item.id}">删除</span></td>
                </td>
                </tr>
                `
            });
        } else {
            this.tbody.innerHTML = `
            <tr height="100">
            <td colspan="6">
            <h1>买点什么犒劳自己吧<a href="details.html">GO</a></h1>
            </td>
            </tr>  `
        }
        this.count()
        localStorage.setItem("cart", JSON.stringify(this.dataList))
    }
    add() {
        this.cartTable.onclick = (e) => {
            var e = e || window.event
            var target = e.target || e.srcElement
            //做全选 遍历购物车，把每一个数据的is_select都等于全选框的状态
            if (target.className == "selectAll") {
                // console.log(target.checked)
                this.dataList.forEach((item) => {
                    item.is_select = target.checked
                })
                this.render()
            }
            //做单选
            if (target.className == 'select') {
                let targetId = target.dataset.id
                let goods = this.dataList.find((item) => {
                    return item.id == targetId
                })
                goods.is_select = target.checked
                this.selectAll.checked = this.dataList.every((item) => {
                    return item.is_select
                })
                this.render()
            }
            //做删除
            if (target.className == 'del') {
                let targetId = target.dataset.id
                this.dataList = this.dataList.filter((item) => {
                    return item.id != targetId
                })
                this.render()
            }
            //做多选删除
            if (target.className == 'dlAll') {
                if (confirm('你确定要删除这些商品吗')) {
                    this.dataList = this.dataList.filter((item) => {
                        return !item.is_select
                    })
                }
                this.render()
            }
            //做加
            if (target.className == 'add') {
                let targetId = target.dataset.id
                let goods = this.dataList.find((item) => {
                    return item.id == targetId
                })
                if (goods.cart_Num == goods.goods_Num) {
                    alert('该商品你只能买' + goods.goods_Num + "件")
                    return
                } else {
                    goods.cart_Num++
                }
                this.render()
            }
            //做减
            if (target.className == 'sub') {
                let targetId = target.dataset.id
                let goods = this.dataList.find((item) => {
                    return item.id == targetId
                })
                if (goods.cart_Num <= 1) {
                    goods.cart_Num = 1
                } else {
                    goods.cart_Num--
                }
                this.render()
            }
            //结算
            if (target.className == 'calc') {
                if (this.totanum.innerHTML > 0) {
                    location.href = '../money.html'
                }else{
                    alert('请选择商品')
                }
            }
        }
    }
    count(){
        let totanum = 0
        let money = 0
        this.dataList.forEach((item)=>{
           if(item.is_select){
            totanum += item.cart_Num-0
            money += item.salePrice * item.cart_Num
           }
        })
        this.selectAll.checked = this.dataList.every((item)=>{
           return item.is_select
        })
        this.totanum.innerHTML = totanum
        this.money.innerHTML = money
        
    }
}
new Cart()